<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
    <script src="../lib/jquery-3.4.1.js"></script>
</head>

<body>
    <div class="top-box">
        <div class="wrap">
            <a href="" class="top-logo"></a>
            <div class="top-nav-box">
                <span>发现音乐</span>
                <span>我的音乐</span>
                <span>朋友</span>
                <span>商城</span>
                <span>音乐人</span>
                <span>下载客户端</span>
            </div>
            <div class="top-hot">

            </div>
            <div class="top-search-box">
                <div class="top-search-img"></div>
                <input type="text" placeholder="音乐/视频/电台/用户">
            </div>
            <div class="top-author-box">
                创作者中心
            </div>
            <div class="top-info-box">
                <span class="top-info">登陆</span>
                <div class="top-info-other"></div>
            </div>
        </div>
        <div class="nav-box">
            <div class="nav-content-box">
                <span>推荐</span>
                <span>排行榜</span>
                <span>歌单</span>
                <span>主播电台</span>
                <span>歌手</span>
                <span>新碟上架</span>
            </div>
        </div>
    </div>
    <div class="main-box">
        <div class="main-content-box">
            <div class="main-content-top-box row">
                <span>全部新碟</span>

            </div>
            <div class="main-content-music-box">
                <!-- <div class="main-content-music-item-box">
                    <div class="pic-box">
                        <img src="" alt="" class="pic">
                        <div class="music-content row">


                            <span class="play"></span>
                        </div>
                    </div>
                    <p class="music-name"></p>
                    <p class="author-box">

                        <span class="author"></span>

                    </p>

                </div> -->

            </div>
        </div>
    </div>


    <script>
        var url = "https://music.aityp.com/top/album"
        var music = [];

        var box = document.getElementsByClassName("main-content-music-box");

        http(url, getMusic);

        function getMusic(res) {

            for (var i = 0; i < 35; i++) {
                var content = Object();
                content.author = Array();
                content.imgUrl = res.albums[i].picUrl;
                for (var test = 0; test < res.albums[i].artists.length; test++) {
                    content.author.push(res.albums[i].artists[test].name)
                    if (test > 0) {
                        content.author[0] = (content.author[0] + '&nbsp;/&nbsp;' + content.author[test])
                    }
                }
                content.name = res.albums[i].name;
                music.push(content);
            }

            for (var j = 0; j < music.length; j++) {
                var item;
                item = $(`
                <div class="main-content-music-item-box">
                    <div class="pic-box">
                        <img src="${music[j].imgUrl}" alt="" class="pic">
                        <div class="music-content row">
                            <span class="play"></span>
                        </div>
                    </div>
                    <p class="music-name">${music[j].name}</p>
                    <p class="author-box">
                        <span class="author">${music[j].author}</span>
                    </p>

                </div>
                `)
                $(box).append(item)
            }
        }
    </script>
</body>

</html>